#{extends 'mobile.html' /} #{set title: 'O! - Partidas' /}
#{set 'moreStyles'}
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
#{/set}

<div data-role="collapsible" data-content-theme="c"
	data-collapsed="false">
	<h3>Jogos em espera - Escolha um jogo aqui!</h3>
	<ul id="lista-espera">
	</ul>
</div>

<div data-role="collapsible" data-content-theme="c"
	>
	<h3>Jogos em andamento - Para assistir!</h3>
	<ul id="lista-ativas">
	</ul>
</div>


<div data-role="collapsible" data-content-theme="c"
	data-collapsed="false">
	<h3>Crie seu jogo aqui e agora!</h3>
	<form enctype="application/x-www-form-urlencoded" method="post"  data-ajax="false" 
		action="@{Panel.partida()}">
		<p id="username-field">
			<label for="slider-0">Altura:</label> <input type="range"
				name="altura" id="slider-0" value="4" min="1" max="10" />
		</p>
		<p id="password-field">
			<label for="slider-0">Largura:</label> <input type="range"
				name="largura" id="slider-0" value="4" min="1" max="10" />
		</p>
		<p id="signin-field">
			<input id="signin" type="submit" value="Criar" >
		</p>
	</form>
</div>